import { createComponent, createEffect, createSignal, For } from "solid-js";
import * as Icon from "@/icons/ionicons/ionicons";


export default function Page () {
    const [size, setSize] = createSignal(32)
    const [family, setFamily] = createSignal("Eva")
    const [icons, setIcons] = createSignal<string[]>([])
    const keys = Object.keys(Icon);

    createEffect(() => {
        // const icons = keys.filter(item => item.startsWith(family()));
        setIcons(keys);
    })

    return <div>
            {/* <div><span style="font-size: 32px;">Airplanex国<Icon.F7Clear strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.FeatherSquare strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.IoniconsInformationCircle strokeWidth={1} size={size()} />国xAirplane</span></div>
            <div><span style="font-size: 32px;">Airplanex国<Icon.BiInfoCircleFill strokeWidth={1} size={size()} />国xAirplane</span></div> */}
            {/* <div><span style="font-size: 32px;">Airplanex国<Icon.TablerInfoCircleFilled strokeWidth={1} size={size()} />国xAirplane</span></div> */}
            
        <div class="list-wrap">
            <For each={icons()}>
                {(icon) => {
                    const comp = (Icon as any)[icon];
                    return <div class="icon-item">
                        {createComponent(comp, {size: 32, color: 'red'})}
                        <div>{icon}</div>
                    </div>
                }}
            </For>
        </div>
    </div>
}